<template>
	<NavBar :height="50">
		<view class="container"></view>
	</NavBar>

	<view class="mine">
		<view class="header">
			<!-- 基础信息：头像，名称，设置基本信息 -->
			<view class="info">
				<view class="baseinfo">
					<image class="headPicture" src="/static/logo.png" mode=""></image>
					<h4>标题</h4>
				</view>
				<view class="setting">
					<uni-icons class="icon_gear" type="gear" size="30"></uni-icons>
				</view>
			</view>
			<!-- 激励话语：图片 -->
			<image class="motivationalimg" src="/static/logo.png" mode=""></image>
			<!-- 优惠券  权益卡 -->
			<view class="discount">
				<view class="equity_box">
					<view class="equity">
						<b class="equity_name">优惠券</b>
						<view class="count">共<text class="num">0</text>张</view>
					</view>
					<uni-icons class="icon_gear" type="gear" size="30"></uni-icons>
				</view>
				<view class="equity_box">
					<view class="equity">
						<b class="equity_name">权益卡</b>
						<view class="count">共<text class="num">0</text>张</view>
					</view>
					<uni-icons class="icon_gear" type="gear" size="30"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="order">
			<text class="order_name">我的订单</text>
			<view class="order_content">
				<view class="order_item">
					<uni-icons class="icon_gear" type="gear" size="30"></uni-icons>
					<text>电影</text>
				</view>
				<view class="order_item">
					<uni-icons class="icon_gear" type="gear" size="30"></uni-icons>
					<text>小食周边</text>
				</view>
				<view class="order_item">
					<uni-icons class="icon_gear" type="gear" size="30"></uni-icons>
					<text>演出</text>
				</view>
			</view>
		</view>
		<!-- 我的服务 -->
		<view class="service">
			<view class="service_name">我的服务</view>
			<view class="service_content">
				<view class="service_item love_viewing">
					<view class="service_item_title">
						<uni-icons class="service_icon" type="gear" size="30"></uni-icons>
						<text>我的想看</text>
					</view>
					<uni-icons class="service_icon" type="forward" size="20" color="#ccc"></uni-icons>
				</view>
				<view class="service_item user_feedback">
					<view class="service_item_title">
						<uni-icons class="service_icon" type="gear" size="30"></uni-icons>
						<text>用户反馈</text>
					</view>
					<uni-icons class="service_icon" type="forward" size="20" color="#ccc"></uni-icons>
				</view>
				<view class="service_item message_center">
					<view class="service_item_title">
						<uni-icons class="service_icon" type="gear" size="30"></uni-icons>
						<text>消息中心</text>
					</view>
					<uni-icons class="service_icon" type="forward" size="20" color="#ccc"></uni-icons>
				</view>
				<view class="service_item shipping_address">
					<view class="service_item_title">
						<uni-icons class="service_icon" type="gear" size="30"></uni-icons>
						<text>收获地址</text>
					</view>
					<uni-icons class="service_icon" type="forward" size="20" color="#ccc"></uni-icons>
				</view>
				<view class="service_item online_service">
					<view class="service_item_title">
						<uni-icons class="service_icon" type="gear" size="30"></uni-icons>
						<text>在线客服</text>
					</view>
					<uni-icons class="service_icon" type="forward" size="20" color="#ccc"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import NavBar from "../../components/cusNavBar.vue";
</script>

<style lang="scss">
	$content-color: #fff;

	.container {
		width: 100%;
		height: 50px;
		background: linear-gradient(45deg,
				transparent 33.33%,
				rgba(57, 144, 179, 0.1) 33.33%,
				rgba(0, 0, 0, 0.1) 66.66%,
				transparent 66.66%),
			lightblue;
		// background-size: 20px 20px;
	}

	.mine {
		height: 100%;
		padding: 5px 10px;
		background-color: #eee;

		.header {
			margin-bottom: 10px;

			// 基础信息
			.info {
				height: 60px;
				width: 100%;
				display: flex;
				flex-direction: row;
				margin-bottom: 25px;

				.baseinfo {
					flex: 1;
					display: flex;
					flex-direction: row;
					align-items: center;

					.headPicture {
						width: 60px;
						height: 60px;
						border: 2px solid #fff;
						border-radius: 30px 30px;
						margin-right: 10px;
					}
				}

				.setting {
					width: 60px;
					margin: auto;

					.icon_gear {
						text-align: center;

					}
				}
			}

			//激励话语
			.motivationalimg {
				// display: block;
				width: 100%;
				height: 50px;
				margin-bottom: 10px;
			}

			//权益
			.discount {
				width: 100%;
				height: 70px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.equity_box {
					width: 49%;
					background: $content-color;
					border-radius: 10px;
					display: flex;
					flex-direction: row;

					.equity {
						width: 60%;
						display: flex;
						justify-content: center;
						align-items: center;

						.count {
							display: flex;
							flex-direction: row;

							.num {
								color: red;
							}
						}
					}

					.icon_gear {
						text-align: center;
						margin: auto;
					}
				}
			}
		}

		// 我的订单
		.order {
			height: 100px;
			border-radius: 10px;
			padding: 10px;
			background-color: $content-color;
			margin-bottom: 10px;

			.order_name {
				height: 30px
			}

			.order_content {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;

				.order_item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}
		}

		// 我的服务
		.service {
			padding: 10px;
			border-radius: 10px;
			background-color: $content-color;

			.service_item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				border-bottom: #ccc 1px solid;
				padding: 5px 0;
				.service_item_title{
					width: 110px;
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 12px;
					color: #666;
					.service_icon{
						margin-right: 15px;
					}
				}
			}
		}
	}
</style>